<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
          width: 500px;
          margin-left: 100px;
        }
  
        .data_header {
          width: 100%;
          /* height:30px; */
          line-height: 30px;
          display: flex;
        }
  
        .prevBtn,
        .nextBtn {
          width: 0;
          height: 0;
          border: 15px solid transparent;
        }
  
        .prevBtn {
          border-right-color: #007fff;
        }
  
        .nextBtn {
          border-left-color: #007fff;
        }
  
        .showData {
          flex: 1;
          text-align: center;
          color: #007fff;
        }
  
        .week-header {
          display: flex;
          background: #007fff;
        }
  
        .week-header div {
          flex: 1;
          text-align: center;
          line-height: 30px;
          color: #fff;
          font-weight: 600;
        }
  
        .week_day {
          display: flex;
          flex-wrap: wrap;
        }
  
        .week_day>div {
          width: 14.28%;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
        }
  
        .other-day {
          color: #ccc;
        }
  
        .now-day {
          background-color: #007fff;
          color: #fff;
          font-weight: 600;
        }
  
        .active-day:not(.now-day) {
          color: #007fff;
          border: 2px solid #007fff;
          line-height: 46px;
        }
      </style>
  
</head>
<body>
    <div id="app">
        <div class='data_header'>
          <div class='prevBtn' @click='handlePrev'></div>
          <div class="showData">{{year}}年{{month}}月{{day}}日</div>
          <div class="nextBtn" @click='handleNext'></div>
        </div>
  
        <div class="week">
          <div class="week-header">
            <div>日</div>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
          </div>
  
          <div class='week_day'>
            <div v-for='i in 42'>
              <div v-if='i-beginDay<= 0' class='other-day'>{{ prevMonthDays - beginDay + i }}</div>
              <div v-else-if='i-beginDay > currentMonthDays' class='other-day'>{{i-beginDay-currentMonthDays}}</div>
              <div v-else :class="{
                   'now-day':currentDay == `${year}-${month}-${i-beginDay}`,
                   'active-day':`${year}-${month}-${day}` == `${year}-${month}-${i-beginDay}`
                }" :data-set="i-beginDay" @click='chosenDay'>{{i-beginDay}}</div>
            </div>
          </div>
        </div>
      </div>
  
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
      el: "#app",
      data: {
        year: null,
        month: null,
        day: null,
        currentDay: null
      },
      created() {
        this.intiDate()
      },
      methods: {
        intiDate() { // 当天的年月日
          let date = new Date();
          this.year = date.getFullYear()
          this.month = date.getMonth() + 1
          this.day = date.getDate()
          this.currentDay = `${this.year}-${this.month}-${this.day}`
        },
        chosenDay(e) {
          this.day = e.target.dataset.set
        },
        handlePrev() {
          if (this.month === 1) {
            this.month = 12
            this.year--;
          } else {
            this.month--
          }
        },
        handleNext() {
          if (this.month === 12) {
            this.month = 1
            this.year++
          } else {
            this.month++
          }
        }
      },
      computed: {
        beginDay() { //每个月第一天从星期几开始
          return new Date(this.year, this.month - 1, 1).getDay()
        },
        prevMonthDays() { // 上一个月共有多少天
          return new Date(this.year, this.month - 1, 0).getDate()
        },
        currentMonthDays() { // 当前这个月共有多少天
          return new Date(this.year, this.month, 0).getDate()
        }
      }
    })
  </script>

</html>